<template>
  <view class="pay-container">
    <!-- 头部：返回箭头 + 标题 -->
    <view class="header">
      <button class="back-btn" @click="goBack">
        <image src="/static/icons/back.png" class="back-icon" mode="widthFix" />
      </button>
      <text class="page-title">确认支付</text>
    </view>

    <!-- 套餐信息 -->
    <view class="package-info">
      <view class="package-name">优选套餐</view>
      <view class="package-price">¥{{ price }}</view>
    </view>

    <!-- 支付方式区域：未生成二维码时显示列表，生成后显示已选状态 -->
    <view v-if="!isQrGenerated" class="pay-methods">
      <view
          class="method-item"
          v-for="(method, idx) in payMethods"
          :key="idx"
          @click="selectMethod(method)"
          :class="{ 'selected': selectedMethod === method }"
      >
        <image :src="method.icon" class="method-icon" mode="widthFix" />
        <text class="method-name">{{ method.name }}</text>
        <image src="/static/icons/arrow-right.png" class="method-arrow" mode="widthFix" />
        <image src="/static/icons/checked.png" class="method-checked" mode="widthFix" v-if="selectedMethod === method" />
      </view>
    </view>

    <!-- 已选支付方式（生成二维码后显示） -->
    <view v-else class="selected-method-wrap">
      <view class="selected-method">
        <image :src="selectedMethod.icon" class="method-icon" mode="widthFix" />
        <text class="method-name">{{ selectedMethod.name }}</text>
      </view>
      <button class="change-method-btn" @click="resetPayMethod">更换支付方式</button>
    </view>

    <!-- 确认支付按钮（生成二维码后隐藏 + 处理中禁用） -->
    <view
        v-if="!isQrGenerated"
        class="confirm-btn"
        @click="handleConfirmPay"
        :class="{ 'is-disabled': isSubmitting }"
        :disabled="isSubmitting"
    >
      {{ isSubmitting ? '处理中...' : '确认支付' }}
    </view>

    <!-- 二维码展示区域 -->
    <view class="qr-container" v-if="qrCodeUrl">
      <!-- 二维码容器（过期时添加遮罩） -->
      <view class="qr-wrap">
        <view id="qrCodeContainer" class="qr-code"></view>
        <!-- 过期遮罩层 -->
        <view class="qr-expire-mask" v-if="isQrExpired"></view>
      </view>
      <text class="qr-tip">{{ isQrExpired ? '二维码已过期' : `请使用${selectedMethod.name}扫描二维码支付` }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, nextTick, onUnmounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import request from '@/utils/request.js'; // 引入封装的请求工具

// --- 1. 防抖动函数（通用封装）---
let debounceTimer = null; // 防抖动定时器（全局唯一，避免多实例冲突）
const debounce = (fn, delay = 800) => {
  return function(...args) {
    // 清除之前的定时器
    if (debounceTimer) clearTimeout(debounceTimer);
    // 延迟执行目标函数
    debounceTimer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
};

// --- 2. 状态管理（新增isSubmitting状态锁）---
const orderNo = ref('');   // 订单号（从路由参数获取）
const price = ref(0);      // 订单价格（从路由参数获取）
const payMethods = ref([   // 支付方式（含 payType 标记）
  { name: '微信支付', icon: '/static/icons/wechat.png', payType: 1 },
  { name: '支付宝支付', icon: '/static/icons/alipay.png', payType: 2 },
]);
const selectedMethod = ref(null); // 选中的支付方式
const qrCodeUrl = ref(''); // 二维码地址（后端返回的支付链接）
let qrInstance = null; // 二维码实例，用于销毁

// 核心新增：支付请求状态锁（防止请求过程中重复点击）
const isSubmitting = ref(false);

// 原有状态保留
const isQrGenerated = ref(false); // 是否生成二维码（控制支付方式显示）
const encryptedToken = ref('');   // 后端返回的加密token（key: expStr）
const isQrExpired = ref(false);   // 二维码是否过期
let checkTimer = null;            // 过期校验定时器
const isPaySuccess = ref(false); // 标记是否支付成功
let paySuccessTimer = null;     // 支付成功轮询定时器

/**
 * 页面加载时，从路由参数取订单号、价格
 */
onLoad((options) => {
  if (options.orderNo) orderNo.value = options.orderNo;
  if (options.price) price.value = options.price;
  // 默认选中第一个支付方式（微信支付）
  if (payMethods.value.length > 0) {
    selectedMethod.value = payMethods.value[0];
  }

  // 动态引入二维码生成库（确保在页面加载时加载）
  if (typeof window !== 'undefined' && !window.QRCode) {
    const script = document.createElement('script');
    script.src = '/static/qrcode.min.js'; // 假设已放在static目录
    script.onload = () => console.log('二维码库加载成功');
    script.onerror = () => console.error('二维码库加载失败');
    document.head.appendChild(script);
  }
});

/**
 * 选择支付方式（仅在未生成二维码时生效）
 */
const selectMethod = (method) => {
  if (!isQrGenerated.value && !isSubmitting.value) {
    selectedMethod.value = method;
  }
};

/**
 * 生成二维码
 */
const generateQRCode = (url) => {
  // 先销毁已有二维码
  if (qrInstance) {
    const container = document.getElementById('qrCodeContainer');
    container.innerHTML = ''; // 清空容器
  }

  // 确保QRCode库已加载
  if (window.QRCode) {
    qrInstance = new window.QRCode(document.getElementById('qrCodeContainer'), {
      text: url,               // 后端返回的支付链接
      width: 200,              // 二维码宽度
      height: 200,             // 二维码高度
      colorDark: '#000000',    // 二维码前景色
      colorLight: '#ffffff',   // 二维码背景色
      correctLevel: window.QRCode.CorrectLevel.H // 高容错级别
    });
  } else {
    uni.showToast({ title: '二维码生成失败，请重试', icon: 'none' });
  }
};

/**
 * 定期校验二维码过期状态（每隔10秒）
 */
const checkQrExpiration = async () => {
  try {
    // 调用后端校验接口：agent/payment/validateQrCodeExpiration
    const isExpired = !(await request.post('agent/payment/validateQrCodeExpiration', {
      encryptedToken: encryptedToken.value
    }));

    isQrExpired.value = isExpired;
    if (isExpired) {
      clearInterval(checkTimer); // 过期后停止校验
      uni.showToast({ title: '二维码已过期', icon: 'none' });
      // 延迟1.5秒跳转订单详情页（给用户看提示）
      setTimeout(() => {
        uni.navigateTo({ url: `/pages/package/orderDetail?orderNo=${orderNo.value}` });
      }, 1500);
    }
  } catch (error) {
    console.error('二维码过期校验失败：', error);
  }
};

/**
 * 重置支付方式（更换支付方式时调用）
 */
const resetPayMethod = () => {
  // 清除定时器、二维码、token
  if (checkTimer) clearInterval(checkTimer);
  if (paySuccessTimer) clearInterval(paySuccessTimer);
  if (qrInstance) {
    document.getElementById('qrCodeContainer').innerHTML = '';
    qrInstance = null;
  }
  // 重置所有状态（包括状态锁）
  isSubmitting.value = false;
  isQrGenerated.value = false;
  encryptedToken.value = '';
  isQrExpired.value = false;
  qrCodeUrl.value = '';
};

/**
 * 核心业务：发起预支付请求（不直接绑定点击）
 */
const confirmPay = async () => {
  // 1. 基础校验（防止异常场景）
  if (!selectedMethod.value) {
    return uni.showToast({ title: '请选择支付方式', icon: 'none' });
  }
  if (!orderNo.value) {
    return uni.showToast({ title: '订单号异常', icon: 'none' });
  }
  if (isSubmitting.value) {
    return; // 双重保险：防止定时器未清除导致重复执行
  }

  // 2. 标记为“处理中”，禁用按钮
  isSubmitting.value = true;

  const payScene = typeof plus !== 'undefined' ? 'app' : 'h5';
  const prePayReq = {
    orderNo: orderNo.value,
    payType: selectedMethod.value.payType,
    discountAmountFen: 0,
    qrCode: true,
    payScene: payScene
  };

  try {
    // 3. 调用后端预支付接口
    const res = await request.post('agent/order/prepay', prePayReq);

    // 4. 成功：处理支付结果（生成二维码/APP支付）
    if (res.code === 200) {
      const payData = res.data;
      if (payData.qrCodeUrl && payData.expStr) {
        // 赋值支付链接和加密token
        qrCodeUrl.value = payData.qrCodeUrl;
        encryptedToken.value = payData.expStr;
        isQrGenerated.value = true;

        // 生成二维码
        nextTick(() => {
          generateQRCode(payData.qrCodeUrl);
        });

        // 启动二维码过期校验和支付成功轮询
        checkQrExpiration();
        checkTimer = setInterval(checkQrExpiration, 10 * 1000);
        checkPaySuccess();
        paySuccessTimer = setInterval(checkPaySuccess, 5 * 1000);
      } else if (payData.orderString && typeof plus !== 'undefined') {
        // APP内支付：调用支付SDK
        const provider = selectedMethod.value.payType === 1 ? 'wxpay' : 'alipay';
        uni.requestPayment({
          provider,
          orderInfo: payData.orderString,
          success: () => {
            uni.showToast({ title: '支付成功', icon: 'success' });
            setTimeout(() => {
              uni.navigateTo({ url: '/pages/package/paySuccess' });
            }, 1500);
          },
          fail: (err) => {
            uni.showToast({ title: '支付失败', icon: 'none' });
            console.error('支付失败原因：', err);
          },
          complete: () => {
            // APP支付无论成败，都重置状态锁
            isSubmitting.value = false;
          }
        });
      } else {
        uni.showToast({ title: '支付参数格式异常，请重试', icon: 'none' });
        isSubmitting.value = false; // 重置状态锁
      }
    }
    // 订单不存在：提示并返回上一页
    else if (res.code === 40001) {
      uni.showToast({ title: res.msg, icon: 'none' });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
      isSubmitting.value = false; // 重置状态锁
    }
    // 订单已关闭/过期：提示并跳转重新下单
    else if (res.code === 40002 || res.code === 40003) {
      uni.showToast({ title: res.msg, icon: 'none' });
      setTimeout(() => {
        uni.navigateTo({ url: '/pages/package/index' });
      }, 1500);
      isSubmitting.value = false; // 重置状态锁
    }
    // 其他异常：通用错误提示
    else {
      uni.showToast({ title: res.msg || '发起支付失败', icon: 'none' });
      isSubmitting.value = false; // 重置状态锁
    }
  } catch (error) {
    // 5. 网络异常：重置状态锁
    console.error('预支付流程异常：', error);
    uni.showToast({ title: '网络异常，请稍后再试', icon: 'none' });
    isSubmitting.value = false;
  }
};

/**
 * 防抖动包装后的“确认支付”点击处理
 */
const handleConfirmPay = debounce(confirmPay, 800);

/**
 * 查询订单是否支付成功
 */
const checkPaySuccess = async () => {
  try {
    if (!orderNo.value || isQrExpired.value) return; // 订单号为空/二维码过期则跳过
    const res = await request.get(`/api/payment/queryOrderStatus/${orderNo.value}`);
    const paid = res.data;
    if (paid) {
      isPaySuccess.value = true;
      // 清除所有定时器
      if (checkTimer) clearInterval(checkTimer);
      if (paySuccessTimer) clearInterval(paySuccessTimer);
      uni.showToast({ title: '支付成功', icon: 'success' });
      // 延迟跳转支付成功页
      setTimeout(() => {
        uni.navigateTo({ url: '/pages/package/paySuccess' });
      }, 1500);
    }
  } catch (error) {
    console.error('查询支付成功状态失败：', error);
  }
};

/**
 * 返回上一页
 */
const goBack = () => {
  // 返回前清除防抖动定时器
  if (debounceTimer) clearTimeout(debounceTimer);
  uni.navigateBack();
};

/**
 * 页面卸载：清理所有资源（防止内存泄漏）
 */
onUnmounted(() => {
  // 清除防抖动定时器
  if (debounceTimer) clearTimeout(debounceTimer);
  // 清除业务定时器
  if (checkTimer) clearInterval(checkTimer);
  if (paySuccessTimer) clearInterval(paySuccessTimer);
  // 销毁二维码实例
  if (qrInstance) {
    const container = document.getElementById('qrCodeContainer');
    if (container) container.innerHTML = '';
    qrInstance = null;
  }
  // 重置状态锁
  isSubmitting.value = false;
});
</script>

<style scoped>
/* 全局容器：100%宽度 + 居中所有子元素 + 统一内边距 */
.pay-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center; /* 子元素水平居中 */
  background-color: #e6f7ed;
  padding: 0 20px; /* 左右20px内边距，彻底统一边距 */
  box-sizing: border-box; /* 内边距包含在宽度内，防止溢出 */
}

/* 头部区域：水平对齐 */
.header {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 15px 0;
}
.back-btn {
  padding: 5px;
  background: transparent;
  border: none;
}
.back-icon {
  width: 20px;
  height: 20px;
}
.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-left: 10px;
}

/* 套餐信息：居中显示 */
.package-info {
  margin: 20px 0;
  text-align: center;
}
.package-name { font-size: 18px; color: #333; margin-bottom: 10px; }
.package-price { font-size: 24px; color: #ff4d4f; font-weight: 700; }

/* 支付方式列表：宽度100% + 垂直分布 */
.pay-methods {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

/* 支付方式项：Flex布局 + 对称内边距 */
.method-item {
  width: 100%;
  background-color: #fff;
  border-radius: 12px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 选中状态的高亮特效 */
.method-item.selected {
  border: 2px solid #409eff; /* 高亮蓝色边框 */
  background-color: #f0f7ff; /* 轻微的蓝色背景 */
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.15); /* 增强阴影 */
}

.method-icon {
  width: 36px;
  height: 36px;
  margin-right: 10px;
}
.method-name {
  font-size: 16px;
  color: #333;
  flex: 1; /* 文字占中间剩余空间 */
  text-align: left;
}
.method-arrow {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

/* 选中状态的勾号图标 */
.method-checked {
  width: 20px;
  height: 20px;
  margin-left: 10px;
  z-index: 1;
}

/* 确认支付按钮：基础样式 + 禁用样式 */
.confirm-btn {
  width: 90%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background-color: #67c23a;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  border-radius: 25px;
  margin-bottom: 20px;
  transition: background-color 0.2s;
  cursor: pointer;
}
/* 按钮禁用/处理中样式 */
.confirm-btn.is-disabled {
  background-color: #b3d8ff;
  color: #fff;
  cursor: not-allowed;
  box-shadow: none;
}
.confirm-btn:active:not(.is-disabled) {
  background-color: #52a42c;
}

/* 已选支付方式展示 */
.selected-method-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 12px;
  padding: 12px 15px;
  margin-bottom: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.selected-method {
  display: flex;
  align-items: center;
}
.change-method-btn {
  padding: 6px 12px;
  background-color: #f0f7ff;
  color: #409eff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
}

/* 二维码展示容器 */
.qr-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

/* 二维码包裹层（用于遮罩） */
.qr-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
}
.qr-code {
  width: 200px;
  height: 200px;
  border: 1px solid #eee; /* 增加边框便于识别二维码区域 */
}

/* 二维码过期遮罩 */
.qr-expire-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-expire-mask::after {
  content: '已过期';
  color: #ff4d4f;
  font-size: 16px;
  font-weight: bold;
}

.qr-tip {
  font-size: 14px;
  color: #666;
}
</style>